var width = window.innerWidth;
var height = window.innerHeight;

var stick, pad, dog, paw, direction, btn

// 创建游戏实例
var game = new Phaser.Game(width, height, Phaser.AUTO, '#game');

// 定义场景
var states = {
  // 加载场景
  preload: function () {
    this.preload = function () {
      // 设置背景为黑色
      game.stage.backgroundColor = '#000000';
      // 加载游戏资源
      game.load.crossOrigin = 'anonymous'; // 设置跨域
      game.load.image('up', 'res/images/up.png');
      game.load.image('left', 'res/images/left.png');
      game.load.image('down', 'res/images/down.png');
      game.load.image('right', 'res/images/right.png');
      game.load.image('chameleon', 'res/images/chameleon.png');
      game.load.image('dog', 'res/images/dog.png');
      game.load.image('dpad', 'res/images/dpad.png');
      game.load.image('paw', 'res/images/paw.png');
      game.load.image('btn', 'res/images/btn.png');
      // 添加进度文字
      var progressText = game.add.text(game.world.centerX, game.world.centerY, '0%', {
        fontSize: '60px',
        fill: '#ffffff'
      });
      progressText.anchor.setTo(0.5, 0.5);
      // 监听加载完一个文件的事件
      game.load.onFileComplete.add(function (progress) {
        progressText.text = progress + '%';
      });
      // 监听加载完毕事件
      game.load.onLoadComplete.add(onLoad);
      // 最小展示时间，示例为3秒
      var deadLine = false;
      setTimeout(function () {
        deadLine = true;
      }, 500);
      // 加载完毕回调方法
      function onLoad() {
        if (deadLine) {
          // 已到达最小展示时间，可以进入下一个场景
          game.state.start('created');
        } else {
          // 还没有到最小展示时间，1秒后重试
          setTimeout(onLoad, 200);
        }
      }
    }
  },
  // 开始场景
  created: function () {
    this.create = function () {
      // 添加背景
      game.stage.backgroundColor = '#eee';
      // 添加标题
      var title = game.add.text(game.world.centerX, game.world.height * 0.25, '抓娃娃', {
        fontSize: '40px',
        fontWeight: 'bold',
        fill: '#f2bb15'
      });
      title.anchor.setTo(0.5, 0.5);
      // 添加提示
      var remind = game.add.text(game.world.centerX, game.world.centerY, '点击任意位置开始', {
        fontSize: '20px',
        fill: '#f2bb15'
      });
      remind.anchor.setTo(0.5, 0.5);
      // 添加点击事件
      game.input.onTap.add(function () {
        game.state.start('play');
      });
    }
  },
  // 游戏场景
  play: function () {
    this.create = function () {
      game.stage.backgroundColor = '#fafafa';
      
      var controlSize = 40;

      btn = game.add.button(200, 500, 'btn', actionOnClick, this);
      btn.width = 60;
      btn.height = 60;

      function actionOnClick(){        
        var ani = game.add.tween(paw).to( {x:paw.x, y: 300 }, 2000, "Linear").to( {x:paw.x, y:0 }, 2000, "Linear");
        ani.start();
        if(paw.x > dog.x - dog.width && paw.x < dog.x + dog.width){
          var dogAni = game.add.tween(dog).to({x:paw.x, y: 0}, 2000, 'Linear');
          game.time.events.add(2000, function(){
            dogAni.start();
          })
          
        }
      }

      dog = game.add.sprite(150, 300, 'dog');
      dog.width = 60;
      dog.height = 60;

      paw = game.add.sprite(10, 10, 'paw');
      paw.width = 60;
      paw.height = 60;
      
      var upBtn = game.add.button(70, 435, 'up');
      upBtn.width = controlSize;
      upBtn.height = controlSize;
      var downBtn = game.add.button(70, 515, 'down');
      downBtn.width = controlSize;
      downBtn.height = controlSize;
      var leftBtn = game.add.button(30, 475, 'left');
      leftBtn.width = controlSize;
      leftBtn.height = controlSize;      
      var rightBtn = game.add.button(110, 475, 'right');
      rightBtn.width = controlSize;
      rightBtn.height = controlSize;

      downBtn.onInputDown.add(function(){
        direction = 'down';
      })
      upBtn.onInputDown.add(function(){
        direction = 'up';
      })
      leftBtn.onInputDown.add(function(){
        direction = 'left';
      })
      rightBtn.onInputDown.add(function(){
        direction = 'right';
      })
      downBtn.onInputUp.add(function(){
        direction = false;
      }, this)
      upBtn.onInputUp.add(function(){
        direction = false;
      }, this)
      leftBtn.onInputUp.add(function(){
        direction = false;
      }, this)
      rightBtn.onInputUp.add(function(){
        direction = false;
      }, this)
      var appleTimer = game.time.create(true);
      appleTimer.loop(10, function() {
        if (direction) {
          if (direction === 'down') {
            paw.y = paw.y + 1;
          }
          if (direction === 'left') {
            paw.x = paw.x - 1;
          }
          if (direction === 'up') {
            paw.y = paw.y - 1;
          }
          if (direction === 'right') {
            paw.x = paw.x + 1;
          }
        }
      }, this)
      appleTimer.start();
    }
  },
  // 结束场景
  over: function () {
    this.create = function () {
      // TO-DO
      game.stage.backgroundColor = '#000';
      alert('游戏结束!');
    }
  }
};

// 添加场景到游戏示例中
Object.keys(states).map(function (key) {
  game.state.add(key, states[key]);
});

// 启动游戏
game.state.start('preload');